<template>
	<view class="page mine-favorite">
		<nav-header title="收藏" :showRight="false">
		</nav-header>
		<up-divider :dot="true" v-if="form.list.length == 0"></up-divider>
		<pop-menu :items="menuItems" @select="onSelectMenu" v-else>
			<view class="content" v-for="(item,index) in form.list" :key="index" @longpress="onLongPress(item)">
				<text class="text-sm-Regular text-content" v-if="item.type == 0">{{item.content}}</text>
				<img v-else-if="item.type == 1" @tap.stop="onShowFullImage(item)"
					:src="JSON.parse(item.content).thumbUrl" alt="" class="col-img">
				<view class="chat-file-box" v-else-if="item.type == 2">
					<svg-icon class="chat-file-icon" icon="file" :width="80"></svg-icon>
					<view class="chat-file-info">
						<up-link class="chat-file-name" mode="link" :text="JSON.parse(item.content).name"
							:href="JSON.parse(item.content).url"></up-link>
						<view class="chat-file-size">{{ fileSize(JSON.parse(item.content).size) }}</view>
					</view>
				</view>
				<view v-else-if="item.type == 3" class="chat-msg-audio chat-msg-text" @click="onPlayAudio()">
					<svg-icon icon="waveform" />
					<text class="chat-audio-text">{{ JSON.parse(item.content).duration + '"' }}</text>
					<svg-icon v-if="audioPlayState == 'PAUSE'" icon="icon-play" />
					<svg-icon v-if="audioPlayState == 'PLAYING'" icon="icon-pause" />
				</view>
				<view class="frame">
					<text class="badge">
						{{item.type == 0 && '文本' || item.type == 1 && '图片' || item.type == 2 && '文件' || item.type == 3 && '语音' || '未知类型'}}
					</text>
					<view class="text-xs-Medium info">
						<text>{{item.targetNickName}}</text>
						<text style="color: #A4A7AE;">｜</text>
						<text style="color: #A4A7AE;white-space: nowrap;">{{item.createTime}}</text>
					</view>
				</view>
			</view>
		</pop-menu>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					list: [],
					pageSize: 10,
					pageNum: 1,
					hasNext: true
				},
				selectedItem: null, // 用于存储当前长按的项目
				audioPlayState: 'STOP',
				innerAudioContext: null,
			}
		},
		methods: {
			//查看图片
			onShowFullImage(item) {
				if (JSON.parse(item.content).thumbUrl) {
					uni.previewImage({
						urls: [JSON.parse(item.content).thumbUrl]
					})
				}
			},
			onPlayAudio() {
				// 初始化音频播放器
				if (!this.innerAudioContext) {
					this.innerAudioContext = uni.createInnerAudioContext();
					this.form.list.forEach(item => {
						if (item.type == 3) {
							this.form.url = JSON.parse(item.content).url
						}
					})
					this.innerAudioContext.src = this.form.url;
					this.innerAudioContext.onEnded((e) => {
						console.log('停止')
						this.audioPlayState = "STOP"
					})
					this.innerAudioContext.onError((e) => {
						console.log("播放音频出错");
						console.log(e)
					});
				}
				if (this.audioPlayState == 'STOP') {
					this.innerAudioContext.play();
					this.audioPlayState = "PLAYING";
				} else if (this.audioPlayState == 'PLAYING') {
					this.innerAudioContext.pause();
					this.audioPlayState = "PAUSE"
				} else if (this.audioPlayState == 'PAUSE') {
					this.innerAudioContext.play();
					this.audioPlayState = "PLAYING"
				}
			},
			onLongPress(item) {
				this.selectedItem = item;
				console.log(this.selectedItem)
			},
			getData() {
				this.$http({
					url: "/favorite/list",
					method: "GET",
					data: this.form
				}).then((res) => {
					this.form = res
					this.form.list.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
					this.hasNext = res.length == 0
				})
			},
			fileSize(size) {
				if (size > 1024 * 1024) {
					return Math.round(size / 1024 / 1024) + "M";
				}
				if (size > 1024) {
					return Math.round(size / 1024) + "KB";
				}
				return size + "B";
			},
			onSelectMenu(item) {
				if (item.key == "COPY") {
					var selectContent
					if (this.selectedItem.type == 0) {
						selectContent = this.selectedItem.content
					}
					if (this.selectedItem.type == 1) {
						selectContent = JSON.parse(this.selectedItem.content).originUrl
					}
					if (this.selectedItem.type == 2 || this.selectedItem.type == 3) {
						selectContent = JSON.parse(this.selectedItem.content).url
					}
					uni.setClipboardData({
						data: selectContent,
						success: () => {
							uni.showToast({
								title: '已复制',
								icon: 'none'
							});
						},
						fail: () => {
							uni.showToast({
								title: '复制失败',
								icon: 'none'
							});
						}
					});
				} else if (item.key == "DELETE") {
					uni.showModal({
						title: '删除收藏',
						content: '确认删除该收藏?',
						success: (res) => {
							if (!res.cancel) {
								this.$http({
									url: `/favorite/${this.selectedItem.id}`,
									method: "DELETE"
								}).then((data) => {
									console.log(data)
									// 从当前页的列表中移除被删除的项目
									this.form.list = this.form.list.filter(item => item.id !== this
										.selectedItem.id);
									uni.showToast({
										title: "删除成功",
										icon: "none"
									})
									// 重置选中项
									this.selectedItem = null;
								})
							}
						}
					})
				}
			},
		},
		computed: {
			menuItems() {
				let items = [];

				items.push({
					key: 'COPY',
					name: '复制',
					icon: 'bars'
				});

				items.push({
					key: 'DELETE',
					name: '删除',
					icon: 'trash',
					// color: '#e64e4e'
				});
				return items;
			},
			// fileSize(size) {
			// 	if (size > 1024 * 1024) {
			// 		return Math.round(size / 1024 / 1024) + "M";
			// 	}
			// 	if (size > 1024) {
			// 		return Math.round(size / 1024) + "KB";
			// 	}
			// 	return size + "B";
			// },
		},
		onLoad() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.mine-favorite {
		width: 100%;
		display: flex;
		flex-direction: column;

		.content {
			background-color: $white;
			display: flex;
			flex-direction: column;
			padding: 24rpx 32rpx;
			gap: 24rpx;
			margin-top: 10rpx;

			.chat-msg-audio {
				width: 222rpx;
				padding: 4rpx;
				display: flex;
				align-items: center;
				background-color: #2970ff;
				color: $white;
				gap: 8px;

				&::after {
					border-color: transparent #2970ff transparent transparent
				}

				.chat-audio-text {
					padding-right: 8px;
					font-size: 14px;
				}

				.icon-voice-play {
					font-size: 20px;
					padding-right: 8px;
				}
			}

			.text-content {
				color: $gray-600;
			}

			.chat-file-box {
				position: relative;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				background-color: $white;
				border-radius: 8px;
				// padding: 12px;
				box-sizing: border-box;
				gap: 8px;

				.chat-file-info {
					flex: 1;
					height: 100%;
					text-align: left;
					font-size: 14px;
					width: 300rpx;

					.chat-file-size {
						color: $gray-400;
					}

					.chat-file-name {
						font-size: 16px;
						font-weight: 600;
						margin-bottom: 15px;
						word-break: break-all;
						color: $gray-900 !important;
					}
				}

				.chat-file-icon {
					width: 40px;
				}
			}

			.col-img {
				width: 222rpx;
				height: 222rpx;
			}

			.frame {
				display: flex;
				align-items: center;
				gap: 24rpx;

				.badge {
					border: 1rpx solid $brand-200;
					padding: 4rpx 12rpx;
					border-radius: 18rpx;
					font-size: 20rpx;
					font-weight: 500;
					line-height: 28rpx;
					color: $brand-500;
				}

				.info {
					display: flex;
					flex: 1;
					align-items: center;
				}
			}
		}
	}
</style>